<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>text-color-gradient</title>
    <style>
        .text-color-gradient {
            display: inline-block;
            font-size: 10em;
            position: relative;
            color: #ffc500;
        }

        .text-color-gradient[data-text]::after {
            content: attr(data-text);
            color: #c21500;
            position: absolute;
            left: 0;
            z-index: 2;
            mask-image: linear-gradient(0.25turn, #c21500, transparent);
            -webkit-mask-image: linear-gradient(0.25turn, #c21500, transparent);
        }
    </style>
</head>

<body>
    <div style="text-align: center;">
        <div class="text-color-gradient" data-text="Clloz">
            Clloz
        </div>
    </div>
</body>

</html>